<script setup lang="ts">
import { computed, ref } from 'vue';

const firstName = ref('John')
const listtName = ref('Doe')

// computed 只读写法 readonly
// const fullName = computed(() => {
//   return firstName.value + ' ' + listtName.value
// })

// computed 可读可写 get set 对象形式
const fullName = computed({
  get: () => {
    return firstName.value + ' ' + listtName.value
  },
  set: (aaa) => {
    const name = aaa.split(' ')
    firstName.value = name[0]
    listtName.value = name[1]
  }
})
</script>

<template>
  <input type="text" v-model="firstName">
  <input type="text" v-model="listtName">
  <p>完整姓名</p>
  <input type="text" v-model="fullName">
</template>

<style scoped>

</style>
